<extend name="Layout:layout" />
<block name="head_after">
    <script type="text/javascript" src="__THEME__js/index.js"></script>    
    <style type="text/css"> 
        .container, .container *{margin:0; padding:0;}
        .container{width:994px; height:405px; overflow:hidden;position:relative;}
        .slider{position:absolute;}
        .slider li{list-style:none;display:inline;}
        .slider img{width:994px; height:405px; display:block;}
        .slider2{width:2000px;}
        .slider2 li{float:left;}
        .num{position:absolute; right:5px; bottom:5px;}
        .num li{
            float: left;
            color: #d71437;
            text-align: center;
            line-height: 16px;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            margin: 3px 1px;
            border: 1px solid #d71437;
            background-color: #fff;
        }
        .num li.on{
            color: #fff;
            line-height: 21px;
            width: 21px;
            height: 21px;
            font-size: 16px;
            margin: 0 1px;
            border: 0;
            background-color: #d71437;
            font-weight: bold;
        }
    </style>
</block>
<block name="body_main">
    <div class="block clearfix">
        <div class="AreaL">
            <script type="text/javascript">
                //初始化主菜单
                function sw_nav2(obj, tag)
                {
                var DisSub2 = document.getElementById("DisSub2_" + obj);
                var HandleLI2 = document.getElementById("HandleLI2_" + obj);
                if (tag == 1)
                {
                DisSub2.style.display = "block";
                HandleLI2.className = "current";
                } else
                {
                DisSub2.style.display = "none";
                HandleLI2.className = "";
                }
                }
            </script>
            <div id="category_tree">
                <div class="tit">所有商品分类</div>
                <dl class="clearfix">                    
                    <product_category:get_tree remark="页面顶部商品二级分类">
                        <div  class="dt" onMouseOver="sw_nav2({$key}, 1);" onMouseOut="sw_nav2({$key}, 0);">
                            <div id="HandleLI2_{$key}">
                                <a class="a" href="{:U('Product/products','cid='.$vo['id'])}">{$vo.title}<img src="__THEME__images/biao8.gif" /></a>
                            </div>
                            <if condition="$vo['children']">
                                <dd  id="DisSub2_{$key}" style="display:none">
                                <foreach name="vo['children']" item="vo2"> 
                                    <a class="over_2" href="{:U('Product/products','cid='.$vo2['id'])}">{$vo2.title}</a>  
                                    <div class="clearfix"></div>
                                </foreach>
                                </dd>
                            </if> 
                        </div>
                    </product_category:get_tree>
                </dl>
            </div>
            <div class="blank_1"></div>
        </div>
        <div style="float:right; width:994px;"> 
            <div class="container" id="idTransformView">
                <ul class="slider" id="idSlider">
                    <advertising_content:get_list code="WSSC_JDT_RM1" remark="网上商城首页第1轮播焦点图">
                        <li><a href="{$vo.link_url}" target="_blank" title="{$vo.title}"><img src="{$vo.file_path}" alt="{$vo.title}" /></a></li>                    
                    </advertising_content:get_list>
                    <!--
                    <li><a href="http://114.112.100.248:8088/goods.php?id=92" target="_blank"><img src="__THEME__images/20160412toyuqg.jpg"/></a></li>
                    <li><a href="http://114.112.100.248:8088/goods.php?id=93" target="_blank"><img src="__THEME__images/20160412qtrwpl.jpg"/></a></li>
                    <li><a href="http://www.sunvim.cn:8088/goods.php?id=50" target="_blank"><img src="__THEME__images/20150923rtognw.jpg"/></a></li>
                    <li><a href="http://114.112.100.248:8088/index.php" target="_blank"><img src="__THEME__images/20160412kjqouk.jpg"/></a></li>
                    -->
                </ul>
                <ul class="num" id="idNum">
                    <li>1</li> 
                    <li>2</li> 
                    <li>3</li> 
                    <li>4</li> 
                </ul>
            </div>
            <script type="text/javascript">
                var $ = function (id) {
                return "string" == typeof id ? document.getElementById(id) : id;
                };
                var Class = {
                create: function () {
                return function () {
                this.initialize.apply(this, arguments);
                }
                }
                }
                Object.extend = function (destination, source) {
                for (var property in source) {
                destination[property] = source[property];
                }
                return destination;
                }
                var TransformView = Class.create();
                TransformView.prototype = {
                //容器对象,滑动对象,切换参数,切换数量
                initialize: function (container, slider, parameter, count, options) {
                if (parameter <= 0 || count <= 0)
                        return;
                var oContainer = $(container), oSlider = $(slider), oThis = this;
                this.Index = 0; //当前索引

                this._timer = null; //定时器
                this._slider = oSlider; //滑动对象
                this._parameter = parameter; //切换参数
                this._count = count || 0; //切换数量
                this._target = 0; //目标参数

                this.SetOptions(options);
                this.Up = !!this.options.Up;
                this.Step = Math.abs(this.options.Step);
                this.Time = Math.abs(this.options.Time);
                this.Auto = !!this.options.Auto;
                this.Pause = Math.abs(this.options.Pause);
                this.onStart = this.options.onStart;
                this.onFinish = this.options.onFinish;
                oContainer.style.overflow = "hidden";
                oContainer.style.position = "relative";
                oSlider.style.position = "absolute";
                oSlider.style.top = oSlider.style.left = 0;
                },
                        //设置默认属性
                        SetOptions: function (options) {
                        this.options = { //默认值
                        Up: true, //是否向上(否则向左)
                                Step: 5, //滑动变化率
                                Time: 10, //滑动延时
                                Auto: true, //是否自动转换
                                Pause: 2000, //停顿时间(Auto为true时有效)
                                onStart: function () {}, //开始转换时执行
                                onFinish: function () {} //完成转换时执行
                        };
                        Object.extend(this.options, options || {});
                        },
                        //开始切换设置
                        Start: function () {
                        if (this.Index < 0) {
                        this.Index = this._count - 1;
                        } else if (this.Index >= this._count) {
                        this.Index = 0;
                        }

                        this._target = - 1 * this._parameter * this.Index;
                        this.onStart();
                        this.Move();
                        },
                        //移动
                        Move: function () {
                        clearTimeout(this._timer);
                        var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);
                        if (iStep != 0) {
                        this._slider.style[style] = (iNow + iStep) + "px";
                        this._timer = setTimeout(function () {
                        oThis.Move();
                        }, this.Time);
                        } else {
                        this._slider.style[style] = this._target + "px";
                        this.onFinish();
                        if (this.Auto) {
                        this._timer = setTimeout(function () {
                        oThis.Index++;
                        oThis.Start();
                        }, this.Pause);
                        }
                        }
                        },
                        //获取步长
                        GetStep: function (iTarget, iNow) {
                        var iStep = (iTarget - iNow) / this.Step;
                        if (iStep == 0)
                                return 0;
                        if (Math.abs(iStep) < 1)
                                return (iStep > 0 ? 1 : - 1);
                        return iStep;
                        },
                        //停止
                        Stop: function (iTarget, iNow) {
                        clearTimeout(this._timer);
                        this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
                        }
                };
                window.onload = function () {
                function Each(list, fun) {
                for (var i = 0, len = list.length; i < len; i++) {
                fun(list[i], i);
                }
                }
                ;
                var objs = $("idNum").getElementsByTagName("li");
                var tv = new TransformView("idTransformView", "idSlider", 405, 5, {
                onStart: function () {
                Each(objs, function (o, i) {
                o.className = tv.Index == i ? "on" : "";
                })
                }//按钮样式
                });
                tv.Start();
                Each(objs, function (o, i) {
                o.onmouseover = function () {
                o.className = "on";
                tv.Auto = false;
                tv.Index = i;
                tv.Start();
                }
                o.onmouseout = function () {
                o.className = "";
                tv.Auto = true;
                tv.Start();
                }
                })
                }
            </script>
            <div class="blank5"></div>
            <div class="blank_1"></div></div>
        <div class="blank_1"></div>

        <div class="blank"></div> 
        <div class="goodsBox_1">
            <div class="xm-box">
                <h4 class="title"><span>新品上架</span> <a class="more" href="{:U('Product/products','tag=xinpinshangshi')}">更多</a></h4>
                <div class="blank"></div>
                <div id="show_new_area" class="clearfix">
                    <product_promotion:get_product_list code="xinpinshangshi" limit="15" order="id desc" remark="新品上市">
                        <div class="goodsItem">
                            <a href="{:U('Product/product','id='.$vo['id'])}"><img src="{$vo['picture_url']}" alt="{$vo['title']}" class="goodsimg" /></a><br />
                            <p class="f1"><a href="{:U('Product/product','id='.$vo['id'])}" title="{$vo['title']}">{$vo['title']}</a></p>
                            市场价：<font class="market">￥{$vo['market_price']}元</font><br/>
                            本店价：<font class="f1">￥{$vo['price']}元</font>
                        </div>
                    </product_promotion:get_product_list>
                </div>
            </div>
            <div class="blank"></div>
            <div class="xm-box">
                <h4 class="title"><span>热卖商品</span> <a class="more" href="{:U('Product/products','tag=hot')}">更多</a></h4>
                <div class="blank"></div>
                <div id="show_hot_area" class="clearfix">
                    <product_goods:get_list limit="15" order="visit_count desc" remark="热卖商品">
                        <div class="goodsItem">
                            <a href="{:U('Product/product','id='.$vo['id'])}"><img src="{$vo['picture_url']}" alt="{$vo['title']}" class="goodsimg" /></a><br />
                            <p class="f1"><a href="{:U('Product/product','id='.$vo['id'])}" title="{$vo['title']}">{$vo['title']}</a></p>
                            市场价：<font class="market">￥{$vo['market_price']}元</font><br/>
                            本店价：<font class="f1">￥{$vo['price']}元</font>
                        </div>
                    </product_goods:get_list>
                </div>
            </div>
            <div class="blank"></div>
            <div class="xm-box">
                <h4 class="title"><span>精品推荐</span> <a class="more" href="{:U('Product/products','tag=jingpintuijian')}">更多</a></h4>
                <div class="blank"></div>
                <div id="show_best_area" class="clearfix">
                    <product_promotion:get_product_list code="jingpintuijian" limit="15" order="id desc" remark="精品推荐">
                        <div class="goodsItem">
                            <a href="{:U('Product/product','id='.$vo['id'])}"><img src="{$vo['picture_url']}" alt="{$vo['title']}" class="goodsimg" /></a><br />
                            <p class="f1"><a href="{:U('Product/product','id='.$vo['id'])}" title="{$vo['title']}">{$vo['title']}</a></p>
                            市场价：<font class="market">￥{$vo['market_price']}元</font><br/>
                            本店价：<font class="f1">￥{$vo['price']}元</font>
                        </div>
                    </product_promotion:get_product_list>
                </div>
            </div>
            <div class="blank"></div>
        </div> 
    </div>
</block>